import React,{useEffect,useState} from 'react'
import { Layout, Menu } from 'antd';
import './index.css'
import {withRouter} from 'react-router-dom'
import {
  UserOutlined,
} from '@ant-design/icons';
import axios from 'axios'

const { Sider } = Layout;
const { SubMenu } = Menu

//模拟数组结构
// const  menuList = [
//   {
//     key:"/home",
//     title:"首页",
//     icon:<UserOutlined />
//   },
//   {
//     key:"/user-manage",
//     title:"用户管理",
//     icon:<UserOutlined />,
//     children:[
//       {
//         key:"/user-manage/list",
//         title:"用户列表",
//         icon:<UserOutlined />
//       }
//     ]
//   },
//   {
//     key:"/right-manage",
//     title:"权限管理",
//     icon:<UserOutlined />,
//     children:[
//       {
//         key:"/right-manage/role/list",
//         title:"角色列表",
//         icon:<UserOutlined />
//       },
//       {
//         key:"/right-manage/right/list",
//         title:"权限列表",
//         icon:<UserOutlined />
//       }
//     ]
//   }
// ]
const iconList = {
  "/home":<UserOutlined />,
  "/user-manage":<UserOutlined />,
  "/user-manage/list":<UserOutlined />,
  "/right-manage":<UserOutlined />,
  "/right-manage/role/list":<UserOutlined />,
  "/right-manage/right/list":<UserOutlined />
  //.......
}

function SideMenu(props) {
  const [meun, setMeun] = useState([])
  useEffect(()=>{
    axios.get("http://localhost:5000/rights?_embed=children").then(res=>{
      console.log(res.data)
      setMeun(res.data)
    })
  },[])

  const checkPagePermission = (item)=>{
    return item.pagepermisson
  }

    const renderMenu = (menuList)=>{
      return menuList.map(item=>{
        // item.children 有可能是undefined 为false 加？就不用检查length了
        // checkPagePermission 页面权限
        if(item.children?.length>0 && checkPagePermission(item)){
          return <SubMenu key={item.key} icon={iconList[item.key]} title={item.title}>
             { renderMenu(item.children) }
          </SubMenu>
        }
  
        return checkPagePermission(item) && <Menu.Item key={item.key} icon={iconList[item.key]}  onClick={()=>{
          //  console.log(props)
          props.history.push(item.key)
        }}>{item.title}</Menu.Item>
      })
    }


    // console.log(props.location.pathname) 刷新后，显示刷新前选中页
    const selectKeys = [props.location.pathname]
    const openKeys = ["/"+props.location.pathname.split("/")[1]]

    return (
    <Sider trigger={null} collapsible collapsed={false}>

      {/* "flexDirection":"column"主轴为y */}
      <div style={{display:"flex",height:"100%","flexDirection":"column"}}> 
          <div className="logo" >全球新闻发布管理系统</div>

          {/* "overflow":"auto"自己滚动就行 */}
          <div style={{flex:1,"overflow":"auto"}}>
              <Menu theme="dark" mode="inline" 
              selectedKeys={selectKeys} 
              className="aaaaaaa" 
              defaultOpenKeys={openKeys}>
                  {renderMenu(meun)}
              </Menu>
          </div>
      </div>

    </Sider>
  )
}

export default withRouter(SideMenu)
